<template>
	<view>
		<div style="height:50rpx;background:#fff"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('历史记录')}}
		</div>
		<view class="evenly bg-white">
			<view class="titleSty" :class="{activeSty: current == index}" v-for="(item, index) in checkList" @click="changeTitle(index)" :key="index">
			{{ item }}
			<p v-if="current == index" class="lineSty"></p>
			</view>
		</view>
		<div>
			 <view class="" v-for="(item, index) in carList" :key="index">
				<!-- <div class="flex-1" style="overflow-y: auto;"> -->
					<div class="vehicle-item">
						<div class="status">
							<span v-if="item.status === 1">{{$t('空闲中')}}</span>
							<span v-if="item.status === 2">{{$t('待出发')}}</span>
							<span v-if="item.status === 3">{{$t('进行中')}}</span>
							<span v-if="item.status === 4">{{$t('停用')}}</span>
						</div>
						<div class="content">
							<div class="flex mt-40 ml-30">
								<image src="../../static/icon/carLogo.png" mode="" class="w-35 h-35 ml-24"></image>
								<view class="carBox">
									<view class="carCard">
										<span class="ml-11">{{ item.car_number }}</span>
									</view>
								</view>
								<div class="fz30 font-bold ml-15">{{ item.driver_title }}</div>
							</div>
							<div class="mt-15 ml-50">
								<div class="text-999 fz22">
									{{$t('当前绑定')}}：{{ item.bind_user_title }}
								</div>
							</div>
							<div class="between mt-24 ml-35" style="border-radius: 16rpx;background-color: #F8F8F8;width:90%;">
								<div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
									<div class="font-bold fz25 text-333">{{ get(item, 'car_category_name.title') }}</div>
									<div class="fz22 text-666 mt-10">{{$t('车型')}}</div>
								</div>
								<div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
									<div class="font-bold fz25 text-333">{{ item.car_l }}*{{ item.car_w }}*{{ item.car_h }}
									</div>
									<div class="fz22 text-666 mt-10">{{$t('车厢尺寸')}}(m)</div>
								</div>
								<div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
									<div class="font-bold fz25 text-333">{{ item.product_weight }}{{$t('吨')}}</div>
									<div class="fz22 text-666 mt-10">{{$t('载重')}}</div>
								</div>
								<div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
									<div class="font-bold fz25 text-333">{{ item.product_volume }}m³</div>
									<div class="fz22 text-666 mt-10">{{$t('体积')}}</div>
								</div>
							</div>
				
							<div class="between mt-12 rounded-8 p-18 data ml-35" style="background-color: #FFF7EA;position:relative;width:90%;">
								<div class="current" 
								:class="{idleIng: item.status === 1, 'jobIng': item.status === 2}"
								>{{$t('当前')}}</div>
								<p class="ml-50">{{$t('哈尔滨')}} - {{$t('沈阳')}}</p> 
								<!-- <div class="flex ml-50">
									<div class="text-666 fz22">{{$t('曝光量')}}：</div>
									<div class="fz22 text-333 font-bold">{{ item.exposure_number }}</div>
								</div>
								<div class="flex">
									<div class="text-666 fz22">{{$t('查看量')}}：</div>
									<div class="fz22 text-333 font-bold">{{ item.lookat_number }}</div>
								</div>
								<div class="flex mr-50">
									<div class="text-666 fz22">{{$t('咨询量')}}：</div>
									<div class="fz22 text-333 font-bold">{{ item.comment_number }}</div>
								</div> -->
							</div>
							<div class="between ml-50 mr-50 pb-40">
								<div class="text-999 fz20">
									{{ get(item, 'area.name') }}
								</div>
							
								<div class="flex justify-end mt-22 mb-9 fz24">
									<image src="/static/icon/message.png" mode="widthFix" class="w-25"></image>
									<div class="text-888 ml-8 text-888 fz24">{{$t('联系')}}TA</div>
								</div>
							</div>
				
						</div>
					</div>
					<!-- <div style="height: 250rpx;"></div> -->
				<!-- </div> -->
			 </view>
		</div>
		<div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">{{$t('没有更多了')}}</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkList: [this.$t('申请记录'), this.$t('查看记录'), this.$t('咨询记录')],
				current: 0,
				carList: [
					{
						"id": 1,
						"user_id": 1644,
						"name": this.$t('企鹅'),
						"name_ru": "Пингвины ",
						"mode": 2,
						"car_category_id": 1,
						"car_number": "黑A12345",
						"car_l": 12,
						"car_w": 1,
						"car_h": 1,
						"createtime": 1731046605,
						"updatetime": 1731046605,
						"logo": "/uploads/20241108/2fbccfb045cf25b3da0fa80932e0570c.png,/uploads/20241108/2fbccfb045cf25b3da0fa80932e0570c.png,/uploads/20241108/2fbccfb045cf25b3da0fa80932e0570c.png",
						"videos": "",
						"product_weight": "12",
						"product_volume": "12",
						"goods_l": "12",
						"goods_w": "12",
						"goods_h": "12",
						"transport_list": "2,656,30",
						"order_id": null,
						"status": 1,
						"send_jb_time": 0,
						"current_city_id": 2,
						"exposure_number": 0,
						"comment_number": 0,
						"lookat_number": 0,
						"mobile": null,
						"car_category_name": {
						  "id": 1,
						  "title": this.$t('厢式货车'),
						  "title_ru": this.$t('厢式货车')
						},
						"area": {
						  "id": 2,
						  "pid": 1,
						  "country": "0",
						  "is_hot": "1",
						  "is_port": "1",
						  "shortname": this.$t('北京'),
						  "shortname_ru": "Пекин",
						  "name_ru": "Пекин",
						  "name": this.$t('北京市'),
						  "mergename": "中国,北京,北京市",
						  "mergename_ru": "Китай，Пекин，Пекин",
						  "level": 2,
						  "pinyin": "beijing",
						  "code": "010",
						  "zip": "100000",
						  "first": "B",
						  "lng": "116.405285",
						  "lat": "39.904989"
						},
						"user": {
						  "id": 1644,
						  "username": this.$t('鼎盛昌隆国际贸易有限公司'),
						  "username_ru": "Dingsheng Changlong International Trade Co., Ltd. ",
						  "mobile": "13796374444"
						}
					  },
					{
						"id": 1,
						"user_id": 1644,
						"name": this.$t('企鹅'),
						"name_ru": "Пингвины ",
						"mode": 2,
						"car_category_id": 1,
						"car_number": "黑A12345",
						"car_l": 12,
						"car_w": 1,
						"car_h": 1,
						"createtime": 1731046605,
						"updatetime": 1731046605,
						"logo": "/uploads/20241108/2fbccfb045cf25b3da0fa80932e0570c.png,/uploads/20241108/2fbccfb045cf25b3da0fa80932e0570c.png,/uploads/20241108/2fbccfb045cf25b3da0fa80932e0570c.png",
						"videos": "",
						"product_weight": "12",
						"product_volume": "12",
						"goods_l": "12",
						"goods_w": "12",
						"goods_h": "12",
						"transport_list": "2,656,30",
						"order_id": null,
						"status": 2,
						"send_jb_time": 0,
						"current_city_id": 2,
						"exposure_number": 0,
						"comment_number": 0,
						"lookat_number": 0,
						"mobile": null,
						"car_category_name": {
						  "id": 1,
						  "title": this.$t('厢式货车'),
						  "title_ru": this.$t('厢式货车')
						},
						"area": {
						  "id": 2,
						  "pid": 1,
						  "country": "0",
						  "is_hot": "1",
						  "is_port": "1",
						  "shortname": this.$t('北京'),
						  "shortname_ru": "Пекин",
						  "name_ru": "Пекин",
						  "name": this.$t('北京市'),
						  "mergename": "中国,北京,北京市",
						  "mergename_ru": "Китай，Пекин，Пекин",
						  "level": 2,
						  "pinyin": "beijing",
						  "code": "010",
						  "zip": "100000",
						  "first": "B",
						  "lng": "116.405285",
						  "lat": "39.904989"
						},
						"user": {
						  "id": 1644,
						  "username": this.$t('鼎盛昌隆国际贸易有限公司'),
						  "username_ru": "Dingsheng Changlong International Trade Co., Ltd. ",
						  "mobile": "13796374444"
						}
					  }
				],
				nomore: false,
				params: {
					user_id: uni.getStorageSync("user_id"),
					page: 1,
					// limit: 10,
					// status: 1,
					// goods_type: ''
				},
			}
		},
		mounted() {
			this.getCarList()
		},
		methods: {
			back() {
				this.cback()
			},
			changeTitle(index) {
				this.current = index
			},
			//下拉刷新
			onPullDownRefresh() {
				this.getCarList(true)
			},
			//上拉加载
			onReachBottom() {
				this.params.page++
				this.getCarList()
			},
			getCarList(init) {
				if (init) {
					this.params.page = 1
					this.nomore = false;
				}
				carSource(this.params).then(res => {
					if (res.data.code === 200) {
						// if (this.params.page == 1) {
						// 	this.carList = res.data.data.data || []
						// } else {
						// 	this.carList = [...this.carList, ...res.data.data.data]
						// }
						// if (this.get(res, 'data.data.data').length == 0) {
						// 	this.nomore = true;
						// }
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F6F7FB;
	}
.header {
		font-size: 34rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		padding-top: var(--status-bar-height);
		background: #fff;
		// padding-top: 18rpx;
	}
	.back {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 15rpx;
	}
	.titleSty {
		width: 30%;
		height: 86rpx;
		line-height: 86rpx;
		font-size: 28rpx;
		color: #1d1d1d;
		text-align: center;
	}
	.activeSty {
		color: #278AFF;
		font-size: 32rpx;
		
	}
	.lineSty {
		width: 80rpx;
		height: 6rpx;
		background-color:#278AFF;
		margin: auto;
		margin-top: -10rpx;
	}
	.vehicle-item {
		// margin-top: 16rpx;
		height: 350rpx;
		position: relative;
		margin-bottom: 60rpx;
	
		.content {
			background-image: url("/static/bg/vehicle-item-bg.png");
			background-size: 100% 100%;
			width: 100%;
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			.carBox {
				// width: 194rpx;
				height: 44rpx;
				border-radius: 6px;
				background: #FCCE00;
				margin-left: 20rpx;
				margin-top: 8rpx;
				.carCard {
					// width: 186rpx;
					height: 38rpx;
					flex-shrink: 0;
					border-radius: 6rpx;
					border: 0.5rpx solid rgba(29, 29, 29, 0.47);
					border-radius: 6rpx;
					// background: #FCCE00;
					color: #1D1D1D;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-style: normal;
					font-weight: 500;
					letter-spacing: 1rpx;
					padding-right: 20rpx;
					margin: auto;
				}
			}
			.current {
				width: 28rpx;
				color: #fff;
				position: absolute;
				height: 100%;
				left: 0;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				border-radius: 8rpx 0 0 8rpx;
			}
			.idleIng {
				background: linear-gradient(288.98deg, #66D6E2 2.03%, #278AFF 104.95%);
			}
			.jobIng {
				background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
			}
		}
	
		.status {
			width: 200rpx;
			height: 70rpx;
			position: absolute;
			z-index: 1;  
			right: 25rpx;
			top: 25rpx;
			background: linear-gradient(100.15deg, #66D6E2 4%, #278AFF 81.09%);
			border-radius: 0 15rpx 0 0;
			text-align: center;
			font-size: 24rpx;
			color: #fff;
			padding-left: 50rpx;
			padding-top: 10rpx;
			font-weight: 500;
		}
	
	}
	.current {
		width: 28rpx;
		color: #fff;
		position: absolute;
		background:  linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		height: 100%;
		left: 0;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 8rpx 0 0 8rpx;
	}
</style>
